<?php
/**
 * Created by PhpStorm.
 * User: ai
 * Date: 2018/1/10
 * Time: 9:46
 */
use backend\assets\JcarouselAsset;
use backend\assets\PrismAsset;
use yii\helpers\Html;
use yii\helpers\Url;

$this->params['breadcrumbs'][] = ['label' => '上传案卷', 'url' => ['/yue-juan/index'], 'target' => '_blank'];
$this->params['breadcrumbs'][] = ['label' => '我的案卷', 'url' => ['/yue-juan/my-upload']];
$this->params['breadcrumbs'][] = ['label' => $searchModel->title, 'url' => ['/yue-juan/scan-view', 'title' => $searchModel->title]];

$this->title = $searchModel->title . '-智能阅卷 让阅卷更轻松';
/* @var $this yii\web\View */

//$this->registerJsFile('@bower/jquery.easing/js/jquery.easing.compatibility.js', ['depends' => backend\assets\AppAsset::className()]);
JcarouselAsset::register($this);
$this->registerJsFile('@web/js/jcarousel.skeleton.js', ['depends' => JcarouselAsset::className()]);
$this->registerJsFile('@web/js/prism.js');
$this->registerCssFile('@web/css/prism.css');
PrismAsset::register($this);
//$this->registerCssFile('@vendor/bower/prism/plugins/line-numbers/prism-line-numbers.css');

$js = <<<JS
$(function() {    
    $('.jcarousel').jcarousel({           
        // Configuration goes here
    });
    
    $(".item-li").width($(window).width())
    
    $(".jcarousel-pagination").click(function() {
      $(".item-li").width($(window).width())
    })
    
    $('.jcarousel-pagination').jcarouselPagination({
     perPage: 1,
     item: function(page) {
        var arr_win = $("#win").val().split(",")
        if($.inArray(page,arr_win)!=-1){
            return '<li><a href="#' + page + '" style="color:red;">' + page + '</a></li>';
        }else{
            return '<li><a href="#' + page + '" class="">' + page + '</a></li>';
        }                    
     },
     'carousel': $('.jcarousel')
     // event:  'click',
     // method: 'scroll'
    });
    
    var keyword = $("#keyword").val()
    if(keyword){
        $('.line-numbers').each(function() {
                var str = $(this).html();                
                var txt = str.replace(new RegExp(keyword,"gm"),'<label class="text-danger"><span class="h3">'+keyword+'</span></label>') 
                // var txt = str.replace(keyword,'<label class="text-danger"><span class="h3">'+keyword+'</span></label>');
                $(this).html(txt); 
        })
    }
    var notread = $("#notread").val()
    if(notread){
        $(".pagination").before('<h4 class="text-success">未能识别图片内容的页面有：'+notread+'&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:void(0);" class="text-danger" id="ocr_again">重新识别</a></h4>')
    }
    
    
    $("#ocr_again").click(function() {
        var url = $("#reread_url").val()
        var ids = $("#notread_id").val();
        $.get(url,{"ids":ids})
        window.location.reload(true)
        
    })
});
JS;
$this->registerJs($js);
$css = <<<CSS

.jcarousel ul {
    width: 2000000em;
    position: relative;

    /* Optional, required in this case since it's a <ul> element */
    list-style: none;
    margin: 0;
    padding: 0;
}
/** Carousel Controls **/

.jcarousel-control-prev,.jcarousel-control-next {
    position: absolute;
    top: 10%;
    /*width: 30px;*/
    /*height: 30px;*/
    text-align: center;
    /*background: #4E443C;*/
    /*color: #fff;*/
    text-decoration: none;
    text-shadow: 0 0 1px #000;
    font: 180px/189px Arial, sans-serif;
    /*-webkit-border-radius: 30px;*/
       /*-moz-border-radius: 30px;*/
            /*border-radius: 30px;*/
    /*-webkit-box-shadow: 0 0 2px #999;*/
       /*-moz-box-shadow: 0 0 2px #999;*/
            /*box-shadow: 0 0 2px #999;*/
}

.jcarousel-control-prev {
    left: 20px;
}

.jcarousel-control-next {
    right: 20px;
}

.jcarousel-control-prev:hover span,
.jcarousel-control-next:hover span {
    display: block;
}

.jcarousel-control-prev.inactive,
.jcarousel-control-next.inactive {
    opacity: .5;
    cursor: default;
}
 .photo-credits {
    /*position: absolute;*/
    left: 20px;
    top: 0;
    font-size: 24px;
    color: #0f0f0f;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
    opacity: .66;
}

pre.code-toolbar {
	position: absolute;
}


.pagination {
margin:1px 0;
}
CSS;

$this->registerCss($css);

echo "<input type='hidden' value='" . implode(',', $arr_win_result) . "' id='win'/>";
echo "<input type='hidden' value='" . Url::to(['yue-juan/reread']) . "' id='reread_url'/>";
$get = Yii::$app->request->get();
$ocr_string = $get['GeneralocrSearch']['ocr_string'];
echo "<input type='hidden' value=$ocr_string id='keyword'/>"
?>

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-offset-0 col-sm-6 col-md-6 col-lg-6">
            <?php echo $this->render('_search', ['model' => $searchModel, 'dataProvider' => $dataProvider, 'ocr_string' => $ocr_string, 'arr_win_result' => $arr_win_result]); ?>
        </div>

    </div>
    <div class="row">
        <div class="col-sm-12 col-md-12 col-lg-12">
            <div class="jcarousel-wrapper">

                <div class="row">
                    <div class="col-sm-offset-0 col-sm-10">
                        <!-- Pagination -->
                        <pre style="height: 120px">
                                <p class="jcarousel-pagination pagination" style="">
                                    <!-- Pagination items will be generated in here -->
                                </p>
                            </pre>
                    </div>

                </div>
                <!--
                        <div class="row">
                            <div class="col-sm-offset-3 col-sm-6 col-md-6 col-lg-6">

                                <div class="pagination">
                                    <a href="#" class="jcarousel-control-prev h3"
                                       onclick="javascript:$('.item-li').width($(window).width())">&lsaquo; 上一页</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    <a href="#" class="jcarousel-control-next h3"
                                       onclick="javascript:$('.item-li').width($(window).width())">下一页 &rsaquo;</a>
                                </div>
                            </div>
                        </div>
                -->
                <div class="row">
                    <div class="col-sm-12 col-md-12 col-lg-12">

                        <div class="jcarousel">
                            <ul>
                                <?php


                                $data = $dataProvider->getModels();
                                if (is_array($data) && count($data) > 0) {
                                    foreach ($data as $kk => $record) {
                                        $pageNum = ++$kk;
                                        echo '<li class="item-li" id="pos' . $pageNum . '"><div class="row"><div class="col-sm-6 col-md-6 col-lg-6" ><p class="photo-credits">第' . $pageNum . '页</p><img onclick="$(\'#imgShow\').attr(\'src\',this.src)" data-toggle="modal" data-target="#myModal" src="/' . addslashes($record->path) . '" height="" width="90%"/></div>';
                                        echo '<div class="col-sm-6 col-md-6 col-lg-6" >' . $record->filename;
                                        if (empty($record->ocr_ret)) {
                                            $empty_page[] = $pageNum;
                                            $empty_page_id[] = $record->id;
                                        }

                                        try {
                                            $arr_ocr = json_decode($record->ocr_ret);
                                            if (is_array($arr_ocr->items) && count($arr_ocr->items) > 0) {
//                                                echo '<table class="table table-condensed"><tr><th>编号</th><th>识别结果</th></tr>';
                                                echo '<pre class="line-numbers language-AsciiDoc" style="height:780px;"><code class="language-AsciiDoc">';
                                                foreach ($arr_ocr->items as $key => $item) {
//                                                    $key++;
                                                    echo "\n" . $item->itemstring;
//                                                    if ($ocr_string) {
////                                                        echo "<tr><td>$key</td><td>" . preg_replace('/' . $ocr_string . '/', "<label class='text-danger'><span class='h3'>" . $ocr_string . "</span></label>", $item->itemstring) . "</td></tr>";
////                                                        echo "\n".preg_replace('/' . $ocr_string . '/', '<label class="text-danger"><span class="h3">' . $ocr_string . '</span></label>', $item->itemstring);
//                                                        echo "\n" . $item->itemstring;
//                                                    } else {
////                                                        echo "<tr><td>$key</td><td>" . $item->itemstring . "</td></tr>";
//                                                        echo "\n" . $item->itemstring;
//                                                    }
                                                }

                                                echo '</code></pre>';
//                                                echo '</table>';
                                                echo '</div></div></li>';
                                            }
                                        } catch (\yii\base\ErrorException $e) {
                                            echo "no data";
                                        }

                                    }
                                }
                                if (is_array($empty_page) && count($empty_page) > 0) {
                                    echo "<input id='notread' type='hidden' value='" . implode(',', $empty_page) . "' />";
                                    echo "<input id='notread_id' type='hidden' value='" . implode(',', $empty_page_id) . "' />";
                                }
                                ?>

                            </ul>
                        </div>

                    </div>

                    <a href="#" class="jcarousel-control-prev h3"
                       onclick="javascript:$('.item-li').width($(window).width())">&lsaquo;</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="#" class="jcarousel-control-next h3"
                       onclick="javascript:$('.item-li').width($(window).width())">&rsaquo;</a>

                </div>


            </div>
        </div>
    </div>
    <!--    <div class="row">-->
    <!--        <div class="col-sm-6 col-md-6 col-lg-6">-->
    <!--            <h1>以上为检索结果</h1>-->
    <!--        </div>-->
    <!--    </div>-->
</div>


<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">原图 按<kbd>ESC键</kbd>退出</h4>
            </div>
            <div class="modal-body">
                <img src="" class="" id="imgShow" width="100%"/>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>